#body{
	
	height:550px;
	background:url("images/bg1.jpg") center center no-repeat fixed ;
	background-size: cover;
}

#body2{
	
	height:650px;
	background:url("images/bg2.jpg") center center no-repeat fixed ;
	background-size: cover;
}

.loader1 {
  width: 80px;
  height: 80px;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  border: 5px solid #f3f3f3;
  border-top: 5px solid red;
  border-bottom: 5px solid red;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
  border-radius: 100%;
  animation: spin 3s infinite linear;
}
.loader2 {
  width: 100px;
  height: 100px;
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin:auto;
  border: 2px solid #f3f3f3;
  border-left: 3px solid red;
  border-right: 3px solid red;
  border-top: 3px solid #fff;
  border-bottom: 3px solid #fff;
  border-radius: 100%;
  animation: antispin 2s infinite linear;
}

@keyframes spin {
  from {
    tranform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes antispin {
  from {
    tranform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

#overlay {
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}


.head{
	padding-top: 250px;
	font-weight: bold;
	color:#3498db;
	letter-spacing: 0.35rem;
}

.animated{
	animation-delay: 1s;
}

.para{
	font-weight: bold;
	color:#3498db;
	letter-spacing:0.35rem;
	padding-top: 25px;
}

.jumbotron{
	margin-bottom: -2rem;
}

.photo{
	height: 250px;
	width: 200px;
	border-radius:100%;
	border: 5px solid #eceeef;
	margin-top: -120px;
}

.slider{
	height: 400px; 
	width: 1400px;
	background-color: #eceeef;
}

.slider2{
	height: 400px; 
	background-color: #eceeef;
}
.slides{
	padding-left: 65px;
	font-weight: bold;
	font-size:55px;
	letter-spacing: 0.35rem;
}
 .left{
 	height: 450px;
 	background-color: #2c3e50;
 }

 .right{
 	height: 450px;
 	background-color: #bdc3c7;
 }

 .space{
 	height:150px;
 	background-color: #ecf0f1;
 }

 .quickid{
 	padding-top: 40px;
 	padding-left: 120px;
 	font-weight: bold;
 	color: #fff;
 }

.contact{
 	padding-top: 40px;
 	padding-left: 120px;
 	font-weight: bold;
 	color: black;
 }

 .id{
 	padding-top: 40px;
 	padding-left: 135px;
 	color: #fff;
 	font-size: 20px;
 }

 .id2{
 	padding-left: 135px;
 	color: #fff;
 	font-size: 20px;
 }

.skill{
	font-weight: bold;
	padding-left: 70px;
	letter-spacing: 0.35rem;
	color: #fff;
}

.skillrow{
	padding-top: 20px;
	padding-left: 120px;
	padding-right: 120px;
}

.skillcol1{
	background-color: #eceeef; 
	height: 250px;
}
.skillcol2{
	background-color: #95a5a6; 
	height: 250px;	
}

.pro{
	margin-top: 160px;
	background-color: transparent;
	border: 0.5px solid black;
	border-radius: 16px;
}

.pro1{
	margin-top: 100px;
	background-color: transparent;
	border: 0.5px solid black;
	border-radius: 16px;
}

.skill1{
	width: 25%; 
	animation-name: clang;
	animation-duration: 3s;
	animation-delay: 2s;
	-webkit-animation-name: clang ;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay:2s;
}

@keyframes clang{
	from{width:0%;}
	to{width:25%;}
}

.skill2{
	width: 70%; 
	animation-name: html;
	animation-duration: 3s;
	animation-delay: 2s;
	-webkit-animation-name: html;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay:2s;
}

@keyframes html{
	from{width:0%;}
	to{width:70%;}
}

.skill3{
	width: 65%; 
	animation-name: css;
	animation-duration: 3s;
	animation-delay: 2s;
	-webkit-animation-name: css;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay:2s;
}

@keyframes css{
	from{width:0%;}
	to{width:65%;}
}

.skill4{
	width: 70%; 
	animation-name: boot;
	animation-duration: 3s;
	animation-delay: 2s;
	-webkit-animation-name: boot;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay:2s;
}

@keyframes boot{
	from{width:0%;}
	to{width:70%;}
}

.skill5{
	width: 55%; 
	animation-name: js;
	animation-duration: 3s;
	animation-delay: 2s;
	-webkit-animation-name: js;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay:2s;
}

@keyframes js{
	from{width:0%;}
	to{width:55%;}
}

.skill6{
	width: 20%; 
	animation-name: sql;
	animation-duration: 3s;
	animation-delay: 2s;
	-webkit-animation-name: sql;
	-webkit-animation-duration: 3s;
	-webkit-animation-delay:2s;
}

@keyframes sql{
	from{width:0%;}
	to{width:20%;}
}
h3{
	position: relative;
	bottom: -60px;
}

div.skillcol1:hover,div.skillcol2:hover{
	opacity: 0.7;
	transition-duration: 1s;
}

.btn-lg{
	margin-top: 30px;
	width: 75%;
}

footer{
	position: relative;
	bottom: -20px;
}

.fa{
	padding-top: 40px;
	padding-right: 20px;
	color: black;
}

.link{
	padding-top: 10px; 
	padding-right: 20px;
}

.form-control{
	border-bottom-color: black;
	border-top-style: hidden;
	border-left-style: hidden;
	border-right-style: hidden;
	background-color: transparent;
	border-radius: 0px;
	padding-top: 30px;
}

.form-group{
	padding-left: 30px;
}

.form-control:hover,.form-control:active,.form-control:enabled{
	background-color: transparent;
}

.name{
	width:40%;
	float: left;
}

.email{
	width:40%;
	position: relative;
	left: 50px;
}

.subject , .msg{
	width:88%;
}

.btni{
	margin-top: 15px;
	position:relative;
	left:200px;
	border-color: black;
	color: black;
}

a.nav-link:hover,a.nav-link:active{
	background-color: orange;
	transition-duration: 1s;
}
 
.vis{
	opacity:0;
}